<template>
    <SysDialog :title="dialog.title" :visible="dialog.visible" :width="dialog.width" :height="dialog.height"
        @onClose="onCloseDialog" @onConfirm="onConfirmDialog">
        <template v-slot:content>
            <el-form :model="roleModel" ref="roleRef" :rules="roleRules" label-width="85px" :inline="false">
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="roleModel.name"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="ord">
                    <el-input v-model="roleModel.ord"></el-input>
                </el-form-item>
                <el-form-item label="权限">
                    <el-tree ref="roleTreeRef" :data="roleTreeData" :props="roleTreeProps" node-key="id" show-checkbox
                        check-strictly default-expand-all />
                </el-form-item>
            </el-form>
        </template>
    </SysDialog>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

import { ElForm, ElMessage, ElTree } from 'element-plus'

import SysDialog from '@/components/SysDialog.vue'
import useDialog, { DialogType } from '@/hooks/useDialog'
import useInstance from '@/hooks/useInstance'
import useRoleModel, { IRole } from '@/composables/role/useRoleModel'
import { postRoleApi, putRoleApi } from '@/http/api/role'
import { getMenuApi } from '@/http/api/menu'

const { dialog, onShowDialog, onCloseDialog } = useDialog()
const { global } = useInstance()
const { iRoleModel, roleRules } = useRoleModel()

// 调用父组件方法
const emit = defineEmits(['newGetRoleList'])

// 角色绑定数据
const roleModel = reactive<IRole>(iRoleModel())
// 角色ref属性
const roleRef = ref<InstanceType<typeof ElForm>>()
// 权限树
const roleTreeRef = ref<InstanceType<typeof ElTree>>()
const roleTreeData = ref([])
const roleTreeProps = {
    children: 'children',
    label: 'label',
}
// 弹窗显示
const onShow = (dialogType: string, title: string, editData?: any) => {
    global.$resetForm(roleRef.value, roleModel, iRoleModel)
    dialog.title = title
    dialog.width = '360px'
    dialog.height = '500px'
    onShowDialog()
    if (editData && dialogType == DialogType.EDIT) {
        global.$objCoppy(editData, roleModel)
    }
    getMenuApi().then(res => {
        if (res && res.code == 200) {
            roleTreeData.value = res.data as any
            roleTreeRef.value!.setCheckedKeys(roleModel.auth.split(','), false)
        }

    })
    roleModel.type = dialogType
}
// 弹窗确定
const onConfirmDialog = () => {
    roleRef.value?.validate(valid => {
        if (valid) {
            roleModel.auth = roleTreeRef.value!.getCheckedKeys(false).join(',')
            if (roleModel.type == DialogType.ADD) {
                addRole(roleModel)
            }
            if (roleModel.type == DialogType.EDIT) {
                editRole(roleModel)
            }
        }
    })
}
// 添加角色
const addRole = async (roleModel: IRole) => {
    await postRoleApi(roleModel).then(res => {
        if (res && res.code == 201) {
            ElMessage.success('添加成功！')
            emit('newGetRoleList')
            global.$resetForm(roleRef.value, roleModel, iRoleModel)
            onCloseDialog()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
// 修改角色
const editRole = async (roleModel: IRole) => {
    await putRoleApi(roleModel.id, roleModel).then(res => {
        if (res && res.code == 202) {
            ElMessage.success('修改成功！')
            emit('newGetRoleList')
            global.$resetForm(roleRef.value, roleModel, iRoleModel)
            onCloseDialog()
        } else {
            ElMessage.error(res.msg)
        }
    })
}

// 暴露法方给父组件
defineExpose({ onShow })

</script>

<style scoped lang='scss'>
</style>